<template>
    <van-search shape="round" v-model="value" placeholder="请输入搜索关键词" background="#4fc08d" @search="onSearch"
        @cancel="onCancel">
    </van-search>
    <HomeSwiper></HomeSwiper>
    <van-grid :column-num="5" square :gutter="5">
        <van-grid-item v-for="list in menulist" :key="list">
            <van-image :src="list.url" />
            <span>{{ list.text }}</span>
        </van-grid-item>
    </van-grid>
    <div class="brand">
        <van-grid :column-num="2" square :gutter="10" >
            <van-grid-item v-for="item in brandList" :key="item.id">
                <img :src="item.pic_url">
                <span>{{ item.name }}</span>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant';
import HomeSwiper from '../components/HomeSwiper.vue';
const value = ref('');
const onSearch = val => showToast(val);
const onCancel = () => showToast('取消')
const brandList = [
    { id: 1, name: '直播', pic_url: '/images/product1.png' },
    { id: 2, name: '推荐', pic_url: '/images/product2.png' },
    { id: 3, name: '补贴', pic_url: '/images/product3.png' },
    { id: 4, name: '分享', pic_url: '/images/product4.png' }
]
const menulist = [
    { text: '今日爆款', url: menu1 },
    { text: '好物分享', url: menu2 },
    { text: '推荐购买', url: menu3 },
    { text: '购物心得', url: menu4 },
    { text: '直播专区', url: menu5 },
    { text: '签到中心', url: menu6 },
    { text: '值得购买', url: menu7 },
    { text: '每日优惠', url: menu8 },
    { text: '充值中心', url: menu9 },
    { text: '我的客服', url: menu10 }
]
import menu1 from '../assets/images/menu1.png'
import menu2 from '../assets/images/menu2.png'
import menu3 from '../assets/images/menu3.png'
import menu4 from '../assets/images/menu4.png'
import menu5 from '../assets/images/menu5.png'
import menu6 from '../assets/images/menu6.png'
import menu7 from '../assets/images/menu7.png'
import menu8 from '../assets/images/menu8.png'
import menu9 from '../assets/images/menu9.png'
import menu10 from '../assets/images/menu10.png'
</script>
<style  scoped>
.van-search input {
    background-color: #fff;
}
.brand img {
        width: 100%;
    }

 .brand   span {
        font-size: 14px;
    }

.van-grid-item .van-image{
     
        width: 55%;
}

.van-grid-item   span {
        font-size: 12px;
    }
    .brand .van-grid-item{
        position: relative;
    }
    .brand span{
        position: absolute;
        top:10px;
        left:10px;
        font-size: 18px;
        color:#fff;
        background-color: #e00;
    }
    .van-cell__value.van-field__value{
        background-color: #f00;
    }
</style>